<template>
  <div
    class="qq-list"
    :class="{ 'pack-up': packUp }"
    @dblclick.stop
    @mouseenter.stop="handleMouseenter"
    @mouseleave.stop="handleMouseleave"
  >
    <div class="top">
      <system-child-btn :is-max-btn="false" />
      <span><i class="iconfont wos-QQ fs18" /></span>
      <div class="account">
        <div class="avatar" @mousedown.stop>
          <img src="@/assets/images/weChat/avatar.jpg" alt="avatar" />
          <div class="status"></div>
        </div>
        <div class="info" @mousedown.stop>
          <div class="name fs16">木马</div>
          <span>new SingleBoy()</span>
        </div>
      </div>
    </div>
    <div class="search" @mousedown.stop>
      <span><i class="iconfont wos-search fs12" /></span>
      <input type="text" placeholder="搜索" />
    </div>
    <div class="content" @mousedown.stop>
      <dl class="tabs">
        <dt class="checked">消息</dt>
        <dt>联系人</dt>
        <dt>空间</dt>
        <dt>频道</dt>
      </dl>
      <ul class="chat">
        <li v-for="item in 10" :key="item">
          <img src="@/assets/images/weChat/avatar.jpg" alt="avatar" />
          <div class="info pl10">
            <div class="name fs16">木马</div>
            <p class="fs12">我的QQ</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <span><i class="iconfont wos-menu-line fs20" /></span>
      <span><i class="iconfont wos-menu fs20" /></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import SystemChildBtn from '@/base/systemWindow/systemChildBtn.vue'
import { inject, onBeforeUnmount, ref } from 'vue'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { trayMitt } from '@/utils/utils'
import type { Ref } from 'vue'

const runTaskStore = useRunningTasksStore()

let packUpTimer: ReturnType<typeof setTimeout>
const position = inject<Ref<number[]>>('position') as Ref<number[]>
const componentData = inject<{ [key: string]: unknown }>('componentData')
const appId = inject<string>('appId')
const taskId = inject<string>('taskId')
const packUp = ref<boolean>(!!componentData?.packUp)

const handleMouseleave = () => {
  packUpTimer && clearTimeout(packUpTimer)
  packUpTimer = setTimeout(() => {
    if (position.value?.[1] === 0) {
      const task = runTaskStore.findTask(appId || '', taskId || '')
      if (task) {
        runTaskStore.checkedCurrentTask(appId || '', taskId || '', true)
        runTaskStore.setTaskPatch(appId || '', taskId || '', {
          y: -task.height + 10,
          componentData: {
            packUp: true
          }
        })
        packUp.value = true
      }
    }
  }, 500)
}

const handleMouseenter = () => {
  packUpTimer && clearTimeout(packUpTimer)
  const task = runTaskStore.findTask(appId || '', taskId || '')
  if (task) {
    if (task.y < 0) {
      runTaskStore.setTaskPatch(appId || '', taskId || '', {
        y: 0,
        componentData: {
          packUp: false
        }
      })
      packUp.value = false
    } else {
      runTaskStore.setTaskToMin(appId || '', taskId || '', false)
      runTaskStore.checkedCurrentTask(appId || '', taskId || '')
    }
  }
}

trayMitt.on('trayClick', (data) => {
  if (appId === data.appId && taskId === data.taskId) {
    handleMouseenter()
  }
})

onBeforeUnmount(() => {
  trayMitt.off('trayClick')
})
</script>

<style scoped lang="scss">
.qq-list {
  width: 100%;
  height: 100%;
  background-color: rgb(204, 204, 204);

  &.pack-up {
    transition: opacity 0s 0.2s;
    opacity: 0;
  }

  &.list-enter-active,
  &.list-leave-active {
    transition: all 0.3s ease !important;
  }

  &.list-enter-from,
  &.list-leave-to {
    opacity: 0;
    transform: translateX(-100%);
  }

  .top {
    height: 110px;
    position: relative;
    background-color: rgb(31, 199, 253);

    ::v-deep(.system-child-btn) {
      height: 34px;

      > span {
        width: 32px;
      }
    }

    > span {
      position: absolute;
      top: 10px;
      left: 10px;
      color: rgba(255, 255, 255, 0.5);
      text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    }

    .account {
      padding-top: 40px;
      padding-left: 14px;
      display: flex;
      align-items: center;
      color: #fff;

      .avatar {
        width: 58px;
        height: 58px;
        position: relative;
        margin-right: 10px;

        &:hover img {
          border-color: #ccc;
        }

        img {
          width: 58px;
          height: 58px;
          border-radius: 50%;
          object-fit: contain;
          box-sizing: border-box;
          object-position: center center;
          border: 1px solid transparent;
        }

        .status {
          position: absolute;
          right: 0;
          bottom: 4px;
          width: 14px;
          height: 14px;
          border-radius: 50%;
          background-color: rgb(9, 241, 117);
        }
      }
    }
  }

  .search {
    width: 100%;
    height: 30px;
    backdrop-filter: blur(10px);
    background-color: rgba(31, 199, 253, 0.5);
    color: #fff;

    span {
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      width: 34px;
      padding-left: 14px;
      box-sizing: border-box;
    }

    input {
      color: #fff;
      width: calc(100% - 34px);
      height: 100%;
      border: none;
      outline: none;
      background-color: transparent;

      &::placeholder {
        color: #fff;
      }
    }
  }

  .content {
    height: calc(100% - 110px - 30px - 50px);

    .tabs {
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);

      dt {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
        width: 50px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 2px solid transparent;

        &.checked {
          color: rgb(46, 183, 204);
          border-bottom-color: rgb(46, 183, 204);
        }
      }
    }

    .chat {
      height: calc(100% - 41px);
      overflow-y: auto;

      li {
        display: flex;
        align-items: center;
        height: 60px;
        padding: 0 15px;

        &:hover {
          background-color: rgba(0, 0, 0, 0.1);
        }

        img {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          object-fit: contain;
        }
      }
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 18px;
    box-sizing: border-box;
    border-top: 1px solid rgb(255, 255, 255, 0.5);
    color: rgb(153, 153, 153);

    .wos-menu {
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      background-image: linear-gradient(to bottom, rgb(255, 153, 212), rgb(255, 108, 180) 50%);
    }
  }
}
</style>
